* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, pink, deeppink);
}

/* 3*3的网格 */
.loading {
    width: 200px;
    height: 200px;
    /* 网格布局 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    /* 对子部分进行编号 */
    /* counter-reset: number; */
    transform: rotate(45deg);
}

.loading span {
    /* 自定义属性 */
    --c: pink;
    background: var(--c);
    position: relative;
    /* transform: rotate(0); */
    animation: blinking 2s linear infinite;
    animation-delay: var(--t);
}

.loading span::before {
    /* 设置增量 */
    /* counter-increment: number; */
    /* 将编号赋值到content */
    /* content: counter(number); */
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
}

.loading span:nth-child(7) {
    --c: #f15a5a;
    --t: 0s;
}

.loading span:nth-child(4),
.loading span:nth-child(8) {
    --c: #f0c419;
    --t: .2s;
}

.loading span:nth-child(1),
.loading span:nth-child(5),
.loading span:nth-child(9) {
    --c: #4eba6f;
    --t: .4s;
}

.loading span:nth-child(2),
.loading span:nth-child(6) {
    --c: #2d95bf;
    --t: .6s;
}


.loading span:nth-child(3) {
    --c: #955ba5;
    --t: .8s;
}

@keyframes blinking {
    0%, 100%{
        transform: scale(0);
    }
    40%, 80%{
        transform: scale(1);
    }
}